/* index.scss */
@import "../../scss/form-item";

.ui-form-item {
  &-switch {
    height: var(--win-form-normal);
    line-height: var(--win-form-normal);
    border-radius: 50rpx;
    color: var(--win-form-switch-unCheckedColor);
    background-color: var(--win-form-switch-unCheckedBgColor);
    position: relative;
    transition: all 0.3s;
    padding: 0 20rpx 0 calc(var(--win-form-normal) + 10rpx);
    min-width: calc(var(--win-form-normal) + 20rpx);
    &::before {
      content: '';
      height: var(--win-form-normal);
      width: var(--win-form-normal);
      border-radius: 50%;
      background-color: var(--win-form-switch-dotUnCheckedColor);
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.3s;
    }
    &-checked {
      color: var(--win-form-switch-checkedColor);
      background-color: var(--win-form-switch-checkedBgColor);
      padding: 0 calc(var(--win-form-normal) + 10rpx) 0 20rpx;
      &::before {
        left: calc(100% - var(--win-form-normal));
        background-color: var(--win-form-switch-dotCheckedColor);
      }
    }
    &-placeholder-checked, &-placeholder-unchecked {
      min-width: 30rpx;
    }
  }
}